<template>
  <div class="app-container">
    <div style="font-size: 14px; color: #5727c4;cursor: pointer;" @click="goBackAction">
      <el-icon style="margin-right: 3px; vertical-align: text-top"><Back /></el-icon> 返回
    </div>
    <div class="app-content">
      <div class="title" style="border-bottom: 1px solid #ccc">
        <div class="topTitle">
          录音分析：{{}}
          <el-row>
            <el-col :span="5">主叫号码：{{}}</el-col>
            <el-col :span="5">被叫号码：{{}}</el-col>
            <el-col :span="5">呼叫时间：{{}}</el-col>
            <el-col :span="4">呼叫类型：{{}}</el-col>
            <el-col :span="4">呼叫时长：{{}}</el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <RecordingPlayer :src="audioSource">
          <template #right>
            <el-input
              v-model="queryParams"
              placeholder="输入关键词搜索对话内容"
              :prefix-icon="Search"
              clearable
              style="width: 240px; margin: 0 10px"
              @keyup.enter="handleQuery"
            />
          </template>
        </RecordingPlayer>
        <ul class="contentList">
          <li v-for="(item, index) in list" :key="index">
            <div class="nameStyle">{{ item.name }}: {{ item.phone }}</div>
            <div>
              <el-popover
                :visible="visible"
                placement="right"
                class="borderStyle"
                :show-arrow="false"
                popper-class="recording-detail-list__popover"
                style="border: 2px solid orange"
                :width="160"
                v-if="item.warning"
              >
                <div style="text-align: right; margin: 0">
                  <el-icon @click="visible = false"><CloseBold /></el-icon>
                  <!-- <el-icon @click="visible = false"><Close /></el-icon> -->
                </div>
                <div>{{ item.content }}</div>
                <template #reference>
                  <span>{{ item.content }}</span>
                </template>
              </el-popover>
              <span v-else>{{ item.content }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup name="recordingdetail">
import { Search } from "@element-plus/icons-vue"
import RecordingPlayer from "./components/RecordingPlayer.vue"

const router = useRouter()
const queryParams = ref()
const visible = ref(true)
const playFlag = ref(true)
const list = ref([
  {
    name: "主叫号码",
    phone: "13888888888",
    time: "2022-01-01 12:12:12",
    content: "语音111111111111",
    warning: true,
  },
  {
    name: "被叫号码",
    phone: "13888888888",
    time: "2022-01-01 12:12:12",
    content: "语音2222222222",
    warning: false,
  },
])
const audioSource = ref(
  "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/2021/12/01/01g_gyn/01.mp3"
)

// setTimeout(() => {
//   audioSource.value = 'https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/2021/11/24/24b_tq/01.mp3'
// }, 5000);
const playAction = () => {
  playFlag.value = !playFlag.value
}
/** 查询角色列表 */
function getList() {
  loading.value = true
  //   listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
  //     roleList.value = response.rows
  //     total.value = response.total
  //     loading.value = false
  //   })
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
/** 返回上一层 */
function goBackAction() {
  router.go(-1)
}
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
  .app-content {
    width: 90%;
    height: 100%;
    margin: auto;
    background-color: #fff;
    border-radius: 8px;
    .title {
      border-bottom: 1px solid #ccc;
      .topTitle {
        padding: 12px 30px;
        font-size: 16px;
        .el-col {
          margin-top: 8px;
          font-size: 14px;
          color: #7a7c88;
        }
      }
    }
    .content {
      padding: 12px 30px;
      .contentButton {
        margin-bottom: 10px;
        .el-row {
          .el-col {
            :deep(.buttonStyle) {
              display: inline-block;
              width: 25px;
              height: 25px;
              border-radius: 5px;
              border: 1px solid #ccc;
              text-align: center;
              line-height: 28px;
              margin-right: 10px;
            }
            .activeColor {
              background-color: #e8def8;
            }
          }
        }
      }
      .contentList {
        padding: 0;
        li {
          background-color: #fefcff;
          border: 1px solid #ccc;
          padding: 8px 10px;
          font-size: 14px;
          margin-bottom: 10px;
          div {
            .borderStyle {
              border: 2px solid orange;
            }
          }
          &:nth-child(even) {
            .nameStyle {
              color: #4dda94;
            }
          }
          &:nth-child(odd) {
            .nameStyle {
              color: #9f7cf0;
            }
          }
          div:nth-child(2) {
            margin-top: 5px;
            color: #7a7c88;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.recording-detail-list__popover {
  border: 1px solid red !important;
}
</style>
